<!-- 资源卡片 -->
<template>
	<view
		class="project-card"
		@click="$emit('click')"
	>
		<!-- 头像 -->
		<aha-avatar
			:src="project.avatarUrl || LOGO"
			size="50"
		/>
		<!-- 资源信息 -->
		<view	class="info">
			<!-- 资源名称 -->
			<view class="name strong">{{ project.name }}</view>
			<!-- 高亮标签 -->
			<AhaTags
				:tags="project.highlightTags | splitTags"
				bgColor="rgba(103, 130, 241, 0.6)"
				color="#ffffff"
				padding="2px 10px"
				margin="5px 5px 5px 0"
				fontSize="24"
				maxNumbers="99"
			/>
			<!-- 普通标签 -->
			<AhaTags
				:tags="project.tags | splitTags"
				bgColor="transparent"
				color="#767CA1"
				padding="0 10px 3px 0"
				margin="0"
				fontSize="24"
				maxNumbers="100"
			/>
		</view>
		<!-- 时间 & 数据统计 & 状态-->
		<view class="footer">
			<view class="time">{{ project.time }}{{project.passed ? '' : ' - 未审核'}}</view>
			<view	class="read">
				<u-icon
					name="readed"
					custom-prefix="icon"
					size="22"
				/>
				<text>{{ project.read | numToText }}</text>
			</view>
			<view class="collect">
				<u-icon
					name="collection"
					custom-prefix="icon"
					size="22"
				/>
				<text>{{ project.collect }}</text>
			</view>
		</view>
	</view>
</template>

<script>
import { LOGO } from '@/static/staticData'
export default {
  props: {
    project: {
      type: Object,
      default: () => {}
    },
  },
  data() {
    return {
      LOGO
    }
  }
}
</script>

<style lang="scss" scoped>
.project-card {
  position: relative;
  display: flex;
  flex-wrap: wrap;

  /* 资源信息 */
  .info {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 40rpx;

    .name {
      font-size: $sLarge;
    }
  }

  /* 统计量 */
  .footer {
    display: flex;
    align-items: flex-end;
    width: 100%;
    padding-bottom: 5px;
    font-size: $sMini;

    .time {
      flex: 1;
    }

    .read,
    .collect {
      display: flex;
      align-items: center;
      margin-left: 10px;

      text {
        margin-left: 5px;
      }
    }
  }
}
</style>
